import PopupContainer, {
  PopupContainerEvent,
} from "@/components/app/PopupContainer";
import { View } from "@tarojs/components";
import ByCell from "@/components/ui/ByCell";
import ByText from "@/components/ui/ByText";
import ByButton from "@/components/ui/ByButton";
import ListView from "@/components/app/ListView";

import ApiMaterial from "@/api/material";
import useList from "@/hooks/useList";
import { objectToQueryString } from "@/utils";

export default ({
  intentCustomerId,
  ...rest
}: PopupContainerEvent & { intentCustomerId }) => {
  const { list, loading } = useList<{
    /**
     * 变更单据类型
     */
    chgBillType: string;
    /**
     * 1 主材选材, 2 家具选材, 3 灯具窗帘选材, 4 电器选材
     */
    chooseType: number;
    /**
     * 1.未选材， 2.已选材
     */
    status: number;
    [property: string]: any;
  }>(ApiMaterial.getMaterialChooseItems, {
    defaultParams: [{ intentCustomerId }],
  });

  // 找到主材
  const mainMat = list.find((e) => e.chooseType === 1);

  // 如果主材还未设置（确认），不能进行其他辅材设置：0 已保存 1 已提交
  const isDisabled = mainMat && mainMat?.status === 0;

  return (
    <PopupContainer title="装修选材" {...rest}>
      <View className="p-5 h-[50vh]">
        <ByText type="second" size="xs" className="mb-2">
          提示：主材确认后，才能进行家具、窗帘灯具、电器选材变更操作
        </ByText>

        <ListView loading={loading} isEmpty={list.length == 0}>
          {list.map((item, index) => (
            <ByCell label={item.chgBillType} align="right" border key={index}>
              <ByButton
                className="mr-0"
                size="small"
                disabled={item.chooseType !== 1 && isDisabled}
                to={`/packageProject/pages/material/index?${objectToQueryString(
                  {
                    intentCustomerId,
                    status: item.status,
                    itemText: item.chgBillType,
                    chooseType: item.chooseType,
                  }
                )}`}
              >
                {item.status === 1 ? "选材" : "详情"}
              </ByButton>
            </ByCell>
          ))}
        </ListView>
      </View>
    </PopupContainer>
  );
};
